import React from 'react';
import ReactDOM from 'react-dom';
import EditorList from 'rc-editor-list';
import {getDefaultStyleObj} from "../src/EditorListUtils"
import 'rc-editor-list/assets/index.less';
import './less/index.less';
import { defaultBgImageOrGradient } from "../src/utils";

const { ClassName, State, Layout, Font, BackGround, Border, Interface, Margin, Shadow, Transition } = EditorList;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorDom: null,
      state: 'web',
    };
    this.backgroundRef = React.createRef();
  }

  onClick = (e) => {
    const dom = e.target;
    this.setState({
      editorDom: dom,
    },()=>{
      if (this.backgroundRef.current) {

        // // 主动添加测试
        // this.backgroundRef.current.imageRef.current.onAdd({
        //   image: 'url("https://www.apple.com.cn/macbook-pro-13/images/shared/router_continuity__ee5e36ccpagm_large_2x.jpg")',
        // })
        //
        // // 主动修改测试
        // setTimeout(()=>{
        //   const value = this.backgroundRef.current.imageRef.current.getValue()
        //   value['image'][0] = 'url("https://gw.alipayobjects.com/zos/rmsportal/YOuqklTpqeaLDYKBpJIL.jpg")'
        //   this.backgroundRef.current.imageRef.current.onEdit({
        //     ...value,
        //   })
        //   console.warn('value', value)
        // },1000)
      }
    });
  }

  onChange = (e) => {
    console.log(e);
  }

  onSwicth = () => {
    this.setState({
      state: this.state.state === 'web' ? 'mobile' : 'web',
      // editorDom: null,
    });
  }
  closeEdit = () => {
    this.setState({
      editorDom: null,
    });
  }

  render() {
    if(this.state.editorDom){
      console.warn(getDefaultStyleObj(this.state.editorDom,this.state.state === 'mobile'))
    }
    return (<div id="abc" className="box">
      <div onClick={this.onClick} className="a c editor-user-css jeply9mvwlk-editor_css">
        测试测试测试测试测试测试测试222222222222<br />
        ---------请点击---------
      </div>
      <div onClick={this.onClick} className="a c" style={{ background: '#0000ff' }}>
        bbbbbbbbbbbbbbbbbbbbbb111111<br />
        ---------请点击---------
      </div>
      <button onClick={this.closeEdit}>关闭</button>
      <button onClick={this.onSwicth}>切换模式：{this.state.state}</button>

      {this.state.editorDom && (
        <EditorList
          style={{ width: 280, margin: 50, position: 'absolute', top: 0, right: 0, zIndex: 1 }}
          editorElem={this.state.editorDom}
          onChange={this.onChange}
          isMobile={this.state.state === 'mobile'}
          rootSelector="#abc"
          imageSelect={true}
          ref={(e) => this.editorRef = e}
          defaultActiveKey={["EditorBackGround", "EditorClassName", "EditorState", "EditorLayout", "EditorFont", "EditorInterface"]}

        >
          <BackGround ref={this.backgroundRef} />
          <Interface
            exclude={['position','float','opacity','width','height','overflow']}
          />
        </EditorList>)}
    </div>);
  }
}

ReactDOM.render(<Demo />, document.getElementById('__react-content'));
